<template>
  <view>
    <view class="home-swipe">
      <u-swiper class="my-swipe" :list="images" :circular="true" :indicator="true" height="200px" />
    </view>
    <u-grid class="grid-text" col="4">
      <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" class="grid-item" @click="click(listItem.num)">
        <u-icon :name="listItem.name" :size="48" />
        <text>{{ listItem.title }}</text>
      </u-grid-item>
    </u-grid>
    <u-cell class="home-cell" :is-link="true" icon="order" title="新闻资讯" url="/pages/newsDetail/newsList" />
    <u-cell-group>
      <view v-for="(item, index) in listDetail" :key="index" class="list-container" @click="toNews(item.id)">
        <view style="display: flex;">
          <view :class="item.img ? 'newsList' : 'noImgNewsList'">
            <view class="text-content">
              <text class="common" style="border-right:2px solid #252631">{{ item.newsContentTitle }}</text>
              <text style="padding-left:5px">{{ item.newsTypeName }}</text>
            </view>
            <view class="count">
              <view class="content">
                <u-icon name="clock" color="#1762f2" :size="18" />
                {{ parseTime(item.newsReleaseTime, '{y}-{m}-{d}') }}
              </view>
              <view class="content seePeople">
                <u-icon name="eye" color="#D34D25" size="18" />
                <text class="common" style="color:#D34D25;font-weight: bold;padding-left:5px">{{ item.readingsNumber }}
                </text>人阅读
              </view>
            </view>
          </view>
        </view>
        <img v-if="item.img" :src="item.img.split(',')[0]" alt="" class="NewsImg" />
      </view>
    </u-cell-group>
  </view>
</template>

<script>
import line from '../../static/home/line.png'
import mapPoint from '../../static/home/mapPoint.png'
import textarea from '../../static/home/textarea.png'
import vant from '../../static/home/vant.png'
import newsPageContent from '@/api/home/homePage'
export default {
  data() {
    return {
      images: [
        'http://5b0988e595225.cdn.sohucs.com/images/20191201/73c1e7a9573d41a59bd72bc9886d9030.jpeg',
        'http://5b0988e595225.cdn.sohucs.com/images/20191201/80db4da6585444bfa49ccab8e5628f3e.jpeg'
      ],
      list: [{
        name: textarea,
        title: '仓颉样例',
        num: '10'
      }, {
        name: vant,
        title: 'vant样例',
        num: '20'
      }, {
        name: line,
        title: 'Chart',
        num: '60'
      }, {
        name: mapPoint,
        title: '百度地图',
        num: '70'
      }],
      listDetail: []
    }
  },
  onLoad() {
    this.getNewsContent()
  },
  methods: {
    getNewsContent() {
      newsPageContent().then(res => {
        this.listDetail = res.data.data
      })
    },
    click(type) {
      uni.reLaunch({
        url: '/pages/featurePage/feature?hid=' + type
      })
    },
    toNews(id) {
      uni.navigateTo({
        url: '/pages/newsDetail/newsDetail?id=' + id
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .home-swipe {
    padding: 20px;
  }

  .grid-text {
    .grid-item {
      flex: 1 !important;
    }
  }

  .home-cell {
    margin-top: 20px;
  }

  .noImgNewsList {
    font-size: 15px;
    width: 100%;
    padding-bottom: 10px;
  }

  .noImgNewsList p,
  .noImgNewsList h3,
  .noImgNewsList text {
    margin: 0;
  }

  .noImgNewsList p {
    color: #333333;
  }

  .list-container {
    border-bottom: 1px solid #EBF2F4;
    padding: 15px 14px 22px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .common {
      padding-right: 5px;
    }
  }

  .newsList {
    box-sizing: border-box;
    padding-left: 5px;
    float: right;
    width: 100%;
    margin: 0 auto;
    /* padding-bottom: 10px; */
  }

  .count {
    display: flex;
  }

  .text-content {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #252631;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .newsList p {
    margin: 0;
  }

  .newsList h3 {
    margin: 0;
  }

  .NewsImg {
    float: right;
    width: 115px;
    height: 86px;
    border-radius: 5px;
    margin-top: 3px;
  }

  .seePeople {
    margin-left: 13px;
  }

  .content {
    display: flex;
    align-items: center;
  }
</style>